<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocet</title>
</head>
<body>

<h1>Echo Test</h1>

<input type="text" id="sendTxt">
<button id="sendBtn">发送</button>

<div id="recv"></div>

<script>
    //建立连接
    let webSocket = new WebSocket('ws://localhost:8001/');

    //开启连接
    webSocket.onopen = function () {
        console.log('webSocket open');
        document.getElementById('recv').innerHTML = 'Connected';
    };

    //关闭连接
    webSocket.onclose = function () {
        console.log('webSocket close');
    };

    //拿到返回
    webSocket.onmessage = function (e) {
        console.log(e.data);
        document.getElementById('recv').innerHTML = e.data;
    };

    //发送信息
    document.getElementById('sendBtn').onclick = function () {
        var text = document.getElementById('sendTxt').value;
        webSocket.send(text);
    };

</script>

</body>
</html>